<template>
    <view class="orderdetail">
        <Navigation title="订单详情" backType="back" background="#fff"/>
        <view class="bg ph-32 pv-32 f jc-s-b">
            <view class="f ai-c f1">
                <image :src="detail.userAvatar" class="w-100 b-100 h-100 mr-24">  </image>
                <view>
                    <view class="fs-28 fw-600 text-color4">{{detail.userName}}</view>
                    <view class="fs-28 text-color4 mt-10">{{detail.userMobile}}</view>
                </view>
            </view>
            <view class="w-72 h-28 f ai-c jc-c fs-20 type" :style="{ color: statusColor[detail.status].color, background: statusColor[detail.status].bg }">{{statusColor[detail.status].name}}</view>
        </view>
        <view class="bg mt-20 f ph-32 pv-32" v-if="detail.petsDO">
            <image :src="detail.petsDO.avatar" class="w-120 b-12 h-120 mr-24">  </image>
            <view>
                <view class="fs-28 fw-600 text-color1">{{detail.petsDO.name}}</view>
                <view class="fs-24 text-color3 mt-4">{{ detail.petsDO.gender == 1 ? 'GG' : 'MM' }}/{{detail.petsDO.age}}岁</view>
            </view>
        </view>
        <view class="bg mt-20 ph-32 pv-32">
            <view class="fs-26 text-color4">
                <text>订单编号</text>
                <text class="fw-500 text-color1 ml-32">{{detail.no}}</text>
            </view>
			<view class="fs-26 text-color4 mt-20">
			    <text>订单金额</text>
			    <text class="fw-500 text-color1 ml-32">{{detail.totalPrice}}</text>
			</view>
            <view class="fs-26 text-color4 mt-20">
                <text>下单时间</text>
                <text class="fw-500 text-color1 ml-32">{{detail.createTime}}</text>
            </view>
            <view class="fs-26 text-color4 mt-20">
                <text>付款时间</text>
                <text class="fw-500 text-color1 ml-32">{{detail.payTimeData}}</text>
            </view>
            <view class="fs-26 text-color4 mt-20">
                <text>完成时间</text>
                <text class="fw-500 text-color1 ml-32">{{detail.finishTimeData}}</text>
            </view>
        </view>
        <view class="bg mt-20 ph-32 pv-32" v-if="comment">
            <view class="f ai-c">
                <view class="fs-24 text-color3 mr-8">服务评价</view>
                <view class="f">
                        <image :src="index < comment.scores ?  starSelect: star" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                    </view>
            </view>
            <view class="mt-24 fs-26 text-color4">{{comment.content}}</view>
            <view class="f fc-w">
                <view class="mt-12 w-162 h-162 mr-12 img" v-for="(item, index) in comment.picUrls" :key="index">
					<image :src="item" class="mt-12 w-162 h-162 b-12"></image>
					</view>
            </view>
        </view>

    </view>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';

import { orderDetail,orderComment,formatTimestamp } from '@/services/api/index';
	const { proxy } = getCurrentInstance();
const statusColor = {
    '2': {
        color: '#4974F5',
        bg: '#EDF2FF',
        name: '服务中',
    },
    '3': {
        color: '#25B85B',
        bg: '#E6FFEF',
        name: '已完成',
    },
    '1': {
        color: '#FA7F28',
        bg: '#FFF5ED',
        name: '待付款',
    },
	'0': {
        color: '#FA7F28',
        bg: '#FFF5ED',
        name: '待付款',
    },
    '4': {
        color: '#999999',
        bg: '#F8F8F8',
        name: '已取消',
    },
};
const id = ref<string>();
const detail = ref<any>([]);
const comment = ref<any>('');
onLoad((options: any) => {
    id.value = options.id;
    getDetail();
});

//获取详情
async function getDetail() {
    const { data } = await orderDetail({ id: id.value });
	data.createTime = formatTimestamp(data.createTime);
	if(data.payTime){
		data.payTimeData = formatTimestamp(data.payTime);
	}
	if(data.deliveryTime){
	data.deliveryTimeData = formatTimestamp(data.deliveryTime);
	}
	if(data.finishTime){
	data.finishTimeData = formatTimestamp(data.finishTime);
	}

    detail.value = data;
  if(detail.value.consultationCommentId){
    getComment()
  }

}
async function getComment() {
    const { data } = await orderComment({ id: detail.value.consultationCommentId });
	comment.value = data
	comment.value.picUrls=comment.value.picUrls.split(',')
}
function copy() {
     uni.setClipboardData({
            data: detail.value.no,
            success: function () {
               uni.showToast({
                   title: '复制成功',
                   icon: 'none',
               });
            }
        });
}

</script>
<style lang="scss" scoped>
.orderdetail{
    background: #f5f5f5;
    min-height: 100vh;
    .img:nth-child(4n){
        margin-right: 0;
    }
    .type {
            position: relative;
            top: 15rpx;
        }
        .bg{
            background: #fff;
        }
}
</style>
